<template>
  <div class="rank">
    <div class="paiming">
      <a href="javascript:;" :class="{current:0==current}"  @click="clickMethod0">
        <i class="el-icon-goods "></i>
        <span>热卖排行</span>
      </a>
      <a href="javascript:;" :class="{current:1==current}"  @click="clickMethod1">
        <i class="el-icon-goods"></i>
        <span>特价排行</span>
      </a>
      <a href="javascript:;" :class="{current:2==current}"   @click="clickMethod2">
        <i class="el-icon-goods"></i>
        <span>新品排行</span>
      </a>
    </div>
      <Hot v-for="(r,index) in Ranks" :key="r.categoryID" :rank="r" v-show="current===index"></Hot>
  </div>
</template>

<script>
import Hot from '../Hot/Hot.vue'
import { mapState } from 'vuex'

export default {
  name: 'Rank',
  props: ['rank'],
  data () {
    return {
      currentComponent: 'Hot',
      current: 0
    }
  },
  computed: {
    ...mapState('homeAbout', ['Ranks'])
  },
  mounted () {
    this.$store.dispatch('homeAbout/getRank')
  },
  methods: {
    clickMethod0 (e) {
      this.current = 0
    },
    clickMethod1 (e) {
      this.current = 1
    },
    clickMethod2 (e) {
      this.current = 2
    }
  },
  components: { Hot }

}
</script>

<style lang="less" scoped>
.current{
  color: red!important;
}

.rank {
  margin: 20px 0;
  .paiming {
    height: 50px;
    display: flex;
    margin-bottom: 20px;
    justify-content: center;
    a {
      color: #999;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      i {
        font-size: 40px;
      }

      &:nth-child(2){
        margin: 0 30px;
      }
    }
  }
}
</style>
